<!--
 * @Author: Jackie
 * @Date: 2021-01-03 11:03:02
 * @LastEditors: Jackie
 * @LastEditTime: 2021-01-07 22:48:39
 * @Description: file content
 * @FilePath: \temp-project\src\components\Budget.vue
-->
<template>
<div class='Budget'>
      <div class="BudgetIcon">
        <icon-base icon-name="budget" id="iconbase" width="94" height="97" viewBox="0 0 94 97"><icon-budget /></icon-base>
      </div>
      <div class="BudgetTitle">
          <div class="BudgetTitleMain">年度预算 <small class="BudgetTitleUnit">单位(万元)</small></div>
          <div class="BudgetTitleNum">352,400</div>
      </div>
</div>
</template>

<script>
import IconBudget from "./Icon/Icons/BudgetIcon.vue"
import IconBase from "./Icon/Icons/IconBase.vue"
export default {
  components: {IconBase,IconBudget},
  mounted(){
    window.addEventListener("resize", () => this.svgResize());
  },
  methods:{
    svgResize(){
      const tmp=document.querySelector(".BudgetIcon");
      const w=tmp.clientWidth;
      const h=tmp.clientHeight;
      const iconbase=document.getElementById("iconbase");
      iconbase.style.cssText=`width:${w}; height:${h};flex: 1;padding: 0 .1rem;`
    }
  }
}
</script>

<style lang="less" scoped>
/*年度预算*/
.Budget{
    width: 4.5rem;//360px;
    height: 3rem;//240px; 
    margin-bottom: .375rem;//30px;
    position: relative;
    .BudgetIcon{/*年度预算icon*/
    position: absolute;
     width: 1.3rem;//104px;
     height:1.2125rem;//97px;
     margin-right: .125rem;//10px
     left: -3%;
     bottom: 0%;
    }
    .BudgetTitle{//年度预算标题
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      position: absolute;
      bottom: -6%;
      left: 30%;
      .BudgetTitleMain{
        //标题
        font-family: "NotoSansHans-Light";
        font-weight: 300;
        font-size: .351375rem;//28.11px;
        color: var(--textColor--); 
      }
      .BudgetTitleUnit{
        //单位
        font-family: "NotoSansHans-Light";
        font-weight: 300;
        font-size: .1375rem//11px;
      }
      .BudgetTitleNum{
        font-size: .828625rem;//66.29px;
        font-weight: bolder;
        font-family: 'Franklin Gothic Medium'
      }

      }
    }
</style>
